<template>
  <view class="dynamics-wrapper">
    <!-- 动态列表 -->
    <view class="dynamics-list">
      <!-- 空数据状态 -->
      <view v-if="dynamicsList.length === 0 && !loading" class="empty-state">
        <view class="empty-icon">📝</view>
        <text class="empty-text">暂无动态内容</text>
        <text class="empty-subtext">快来发布第一条动态吧！</text>
      </view>

      <!-- 动态列表内容 -->
      <view
        v-for="(item, index) in filteredDynamics"
        :key="index"
        class="dynamic-item"
        @click="goToDetail(item)"
      >
        <!-- 用户信息 -->
        <view class="user-info">
          <image
            :src="item.avatar"
            class="user-avatar"
            mode="aspectFill"
          ></image>
          <view class="user-details">
            <text class="username">{{ item.username }}</text>
            <text class="post-time">{{ item.time }}</text>
          </view>
          <view class="more-btn">
            <text class="more-icon">⋯</text>
          </view>
        </view>

        <!-- 动态内容 -->
        <view class="dynamic-content">
          <text class="content-text">{{ item.content }}</text>
        </view>

        <!-- 附件区域 -->
        <view
          v-if="item.attachments && item.attachments.length > 0"
          class="attachments-container"
        >
          <view class="attachments-grid">
            <view
              v-for="(attachment, attIndex) in item.attachments"
              :key="attIndex"
              class="attachment-item"
              @click.stop="previewAttachment(attachment, item.attachments)"
            >
              <!-- 图片附件 -->
              <image
                v-if="isImage(attachment.url)"
                :src="attachment.url"
                class="attachment-image"
                mode="aspectFill"
                :alt="attachment.name || '图片'"
              />
              <!-- 视频附件 -->
              <view v-else-if="isVideo(attachment.url)" class="video-container">
                <video
                  :src="attachment.url"
                  class="attachment-video"
                  :poster="attachment.poster || ''"
                  :controls="false"
                  :show-center-play-btn="false"
                  :show-play-btn="false"
                  :show-fullscreen-btn="false"
                  :show-progress="false"
                  :enable-progress-gesture="false"
                  :muted="true"
                  @click.stop="openVideoPreview(attachment.url)"
                />
                <view
                  class="video-overlay"
                  @click.stop="openVideoPreview(attachment.url)"
                >
                  <view class="video-play-icon">
                    <view class="play-btn">▶</view>
                  </view>
                  <view class="video-duration" v-if="attachment.duration">
                    {{ formatDuration(attachment.duration) }}
                  </view>
                </view>
              </view>
              <!-- 其他类型附件 -->
              <view v-else class="file-container">
                <view class="file-icon">📎</view>
                <text class="file-name">{{ attachment.name || "附件" }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 分类标签 -->
        <view class="category-tag">
          <Tag :tags="[item.categoryName]" :defaultTag="item.categoryName" />
        </view>

        <!-- 互动统计 -->
        <InteractionStats
          :views="item.favorites"
          :commentsCount="item.comments"
          :likeCount="item.likes"
          :isLiked="likedItems.has(item.id)"
          @like-click="handleLike(item)"
        />
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="load-more-container">
      <view v-if="loading" class="loading-item">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在加载更多...</text>
      </view>
      <view v-else-if="noMore && dynamicsList.length > 0" class="no-more-item">
        <view class="no-more-line"></view>
        <text class="no-more-text">已显示全部内容</text>
        <view class="no-more-line"></view>
      </view>
      <view v-else-if="!loading && dynamicsList.length > 0" class="pull-up-tip">
        <text class="pull-up-text">上拉加载更多</text>
      </view>
    </view>

    <!-- 视频预览弹窗 -->
    <view
      v-if="showVideoPreview"
      class="video-preview-modal"
      @click="closeVideoPreview"
    >
      <view class="video-preview-container" @click.stop>
        <!-- 关闭按钮 -->
        <view class="close-video-btn" @click="closeVideoPreview">
          <text class="close-icon">×</text>
        </view>

        <!-- 视频播放器 -->
        <video
          :src="currentVideoUrl"
          class="preview-video"
          controls
          :show-center-play-btn="true"
          :show-play-btn="true"
          :show-fullscreen-btn="true"
          :show-progress="true"
          :enable-progress-gesture="true"
          :auto-play="true"
          object-fit="contain"
        />

        <!-- 视频信息 -->
        <view class="video-info">
          <text class="video-title">视频预览</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Tag from "./tag.vue";
import InteractionStats from "./interaction.vue";

// 声明uni全局对象
declare const uni: any;

// 视频预览相关状态
const showVideoPreview = ref(false);
const currentVideoUrl = ref("");

// 定义类型接口
interface DynamicItem {
  id: number;
  username: string;
  avatar: string;
  time: string;
  content: string;
  categoryId: string;
  categoryName: string;
  likes: number;
  comments: number;
  favorites: number;
  isHot: boolean;
  attachments?: Attachment[];
}

interface Attachment {
  url: string;
  name?: string;
  type?: string;
  poster?: string;
  duration?: number;
}

// 定义props
interface Props {
  dynamicsList: DynamicItem[];
  loading: boolean;
  noMore: boolean;
  likedItems: Set<string | number>;
}

const props = defineProps<Props>();

// 定义emits
const emit = defineEmits<{
  likeClick: [item: DynamicItem];
  itemClick: [item: DynamicItem];
}>();

// 计算属性
const filteredDynamics = computed(() => {
  return props.dynamicsList;
});

// 方法
const goToDetail = (item: DynamicItem) => {
  console.log("查看动态详情:", item);
  // 触发父组件的点击事件
  emit("itemClick", item);
};

const handleLike = (item: DynamicItem) => {
  emit("likeClick", item);
};

// 附件相关方法
const isImage = (url: string): boolean => {
  const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
  const lowerUrl = url.toLowerCase();
  return imageExtensions.some((ext) => lowerUrl.includes(ext));
};

const isVideo = (url: string): boolean => {
  const videoExtensions = [
    ".mp4",
    ".avi",
    ".mov",
    ".wmv",
    ".flv",
    ".webm",
    ".mkv",
  ];
  const lowerUrl = url.toLowerCase();
  return videoExtensions.some((ext) => lowerUrl.includes(ext));
};

const previewAttachment = (
  attachment: Attachment,
  attachments: Attachment[]
) => {
  if (isImage(attachment.url)) {
    // 预览图片
    uni.previewImage({
      current: attachment.url,
      urls: attachments.filter((att) => isImage(att.url)).map((att) => att.url),
    });
  } else if (isVideo(attachment.url)) {
    // 播放视频
    openVideoPreview(attachment.url);
  } else {
    // 下载或打开文件
    console.log("打开文件:", attachment.url);
  }
};

// 视频预览相关方法
const openVideoPreview = (videoUrl: string) => {
  console.log("打开视频预览:", videoUrl);
  currentVideoUrl.value = videoUrl;
  showVideoPreview.value = true;
};

const closeVideoPreview = () => {
  showVideoPreview.value = false;
  currentVideoUrl.value = "";
};

// 格式化视频时长
const formatDuration = (duration: number): string => {
  if (!duration) return "";

  const minutes = Math.floor(duration / 60);
  const seconds = Math.floor(duration % 60);

  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
</script>

<style lang="scss" scoped>
/* 动态列表 */
.dynamics-list {
  padding: 15rpx 0;
  background-color: #f5f5f5;
}

.dynamic-item {
  background-color: #fff;
  margin: 0 15rpx 12rpx;
  padding: 25rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.08);
  }

  &:first-child {
    margin-top: 5rpx;
  }
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 15rpx;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
}

.username {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 4rpx;
}

.post-time {
  font-size: 22rpx;
  color: #999;
}

.more-btn {
  padding: 8rpx;
}

.more-icon {
  font-size: 28rpx;
  color: #ccc;
}

/* 动态内容 */
.dynamic-content {
  margin-bottom: 18rpx;
}

.content-text {
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
}

/* 分类标签 */
.category-tag {
  margin-bottom: 20rpx;
}

/* 附件区域样式 */
.attachments-container {
  margin-bottom: 20rpx;
}

.attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.attachment-item {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.95);
  }
}

.attachment-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
  border: 1rpx solid #f0f0f0;
}

.video-container {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.attachment-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.video-play-icon {
  position: relative;
  z-index: 2;
}

.play-btn {
  background: linear-gradient(135deg, #ff6e26 0%, #ff8a50 100%);
  color: white;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(255, 110, 38, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.9);
  }
}

.video-duration {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
  z-index: 1;
}

.file-container {
  width: 120rpx;
  height: 120rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 1rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.file-icon {
  font-size: 32rpx;
  color: #666;
}

.file-name {
  font-size: 20rpx;
  color: #666;
  text-align: center;
  line-height: 1.2;
  max-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 空数据状态 */
.empty-state {
  padding: 80rpx 30rpx;
  text-align: center;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  opacity: 0.6;
}

.empty-text {
  display: block;
  font-size: 32rpx;
  color: #666;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.empty-subtext {
  display: block;
  font-size: 26rpx;
  color: #999;
}

/* 加载状态 */
.load-more-container {
  padding: 40rpx 30rpx;
  text-align: center;
}

.loading-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 20rpx;
  background: rgba(255, 110, 38, 0.05);
  border-radius: 50rpx;
  margin: 0 40rpx;
}

.loading-spinner {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid #f3f3f3;
  border-top: 3rpx solid #ff6e26;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #ff6e26;
  font-weight: 500;
}

.no-more-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 30rpx 0;
}

.no-more-line {
  flex: 1;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
  max-width: 100rpx;
}

.no-more-text {
  font-size: 26rpx;
  color: #999;
  padding: 0 20rpx;
}

.pull-up-tip {
  padding: 20rpx 0;
  opacity: 0.6;
}

.pull-up-text {
  font-size: 24rpx;
  color: #ccc;
}

/* 视频预览弹窗样式 */
.video-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

.video-preview-container {
  position: relative;
  width: 90%;
  max-width: 800rpx;
  max-height: 80vh;
  background-color: #000;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.close-video-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
  backdrop-filter: blur(10rpx);

  &:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.8);
  }
}

.close-icon {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  line-height: 1;
}

.preview-video {
  width: 100%;
  height: 400rpx;
  object-fit: contain;
  background-color: #000;
}

.video-info {
  padding: 20rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 110, 38, 0.9) 0%,
    rgba(255, 138, 80, 0.9) 100%
  );
  text-align: center;
}

.video-title {
  font-size: 28rpx;
  color: #fff;
  font-weight: 600;
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  .dynamic-item {
    margin: 0 12rpx 12rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .user-avatar {
    width: 60rpx;
    height: 60rpx;
  }

  .username {
    font-size: 26rpx;
  }

  .post-time {
    font-size: 20rpx;
  }

  .content-text {
    font-size: 26rpx;
  }

  .video-preview-container {
    width: 95%;
    max-height: 70vh;
  }

  .preview-video {
    height: 300rpx;
  }

  .close-video-btn {
    width: 50rpx;
    height: 50rpx;
    top: 15rpx;
    right: 15rpx;
  }

  .close-icon {
    font-size: 30rpx;
  }
}
</style>